/**
 * @copyright   2010-2017, The Titon Project
 * @license     http://opensource.org/licenses/BSD-3-Clause
 * @link        http://titon.io
 */

@include export("flyout") {
    #{generate-class-name($titon-flyout)} {
        @extend %placeholder-position-absolute;
        z-index: map-get($titon-settings-zindex, "flyout");
        opacity: 0;
        visibility: hidden;
        transition: all map-get($titon-flyout, "transition");
        display: flex;
        flex-wrap: nowrap;
        background: #fff;
        line-height: 1;

        // Nested flyouts
        #{generate-class-name($titon-flyout)} {
            top: 0;
            #{bidi-alignment()}: 90%;

            // Reverse menu to left side in case it goes outside the viewport
            // Will be set automatically from the JavaScript layer
            &.push-opposite {
                #{bidi-alignment()}: auto;
                #{bidi-opposite-alignment()}: 90%;
            }
        }

        a {
            padding: theme-setting("medium-padding");
            display: block;

            .caret-right,
            .caret-left {
                display: none;
            }
        }

        ul {
            @extend %placeholder-list;
            width: 15rem;
        }

        li {
            position: relative;

            // Display caret arrow
            &.has-children > a {
                .caret-right,
                .caret-left {
                    float: bidi-opposite-alignment();
                    display: inline-block;
                }
            }

            // Display sub-menu
            &.is-open > #{generate-class-name($titon-flyout)} {
                opacity: 1;
                visibility: visible;
                #{bidi-alignment()}: 100%;

                &.push-opposite {
                    #{bidi-alignment()}: auto;
                    #{bidi-opposite-alignment()}: 100%;
                }
            }
        }
    }

    #{generate-class-name($titon-flyout, "heading")} {
        padding: theme-setting("medium-padding");
        display: block;
    }
}
